﻿@{
    ViewBag.Title = "用户管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!-- BEGIN MAIN CONTENT -->
<section class="wrapper site-min-height">
    <!-- BEGIN ROW  -->
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    <span class="label label-primary">用户列表</span>
                    <span class="tools pull-right"></span>
                </header>
                <div class="panel-body">
                    <div class="clearfix">
                        <a id="new" class="btn btn-success" target="_blank" href="/Account/Register">增加用户 <i class="fa fa-plus"></i>
                        </a>
                        <button id="enable" class="btn btn-primary">
                            启用 <i class="fa fa-check"></i>
                        </button>
                        <button id="reset" class="btn btn-warning">
                            重置密码 <i class="fa fa-cog"></i>
                        </button>
                    </div>
                    <div class="adv-table">
                        <table class="table table-striped table-hover table-bordered" id="mytable">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- END ROW  -->
</section>

<div id="myEidtModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">修改用户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="myform">
                    <div id="userId" class="hidden"></div>
                    <div class="form-group">
                        <label class="col-lg-2 col-sm-2 control-label">姓名</label>
                        <div class="col-lg-10">
                            <input type="text" name="text" class="form-control" id="realName" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">手机号码</label>
                        <div class="col-lg-10">
                            <input type="text" name="phone" class="form-control" id="phone" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">电子邮箱</label>
                        <div class="col-lg-10">
                            <input type="email" name="email" class="form-control" id="email" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-10">
                            <button type="button" class="btn btn-primary" id="save">提交</button>
                            <button type="button" class="btn btn-danger" id="cancel">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

<link href="~/bootstrap/dist/css/bootstrapValidator.min.css" rel="stylesheet" />
<script src="~/bootstrap/dist/js/bootstrapValidator.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script>
    //删除用户
    function Del(id) {
        var data = { id: id };
        $.post("/Admin/Delete", data, function (msg) {
            if (msg.IsSuccess) {
                //刷新表格数据
                Alert("操作成功");
                refresh();
            }
        });
    }
    //修改用户信息
    function Edit(userId) {
        console.log(userId);
        $("#myEidtModal").modal('show');

        var data = { userId: userId };
        $.post("/Admin/Get", data, function (msg) {
            if (msg.IsSuccess) {
                //刷新表格数据
                $('#userId').html(msg.Data.UserID);
                $('#realName').val(msg.Data.RealName);
                $('#phone').val(msg.Data.Phone);
                $('#email').val(msg.Data.Email);
            }
        });
    }
    //刷新表格
    function refresh() {
        $("#mytable").bootstrapTable('refresh', {
            url: '/Admin/GetUserList',
            silent: true
        });
    }

    //重置密码
    $('#reset').click(function () {
        var checkeds = $('input:checkbox:checked');
        var temp = [];
        checkeds.each(function () {
            temp.push($(this).val());
        })
        var userIds = temp.join(',');
        if (userIds !== "") {
            $.post("/Admin/ResetPwd", { userId: userIds }, function (msg) {
                if (msg.IsSuccess) {
                    Alert("操作成功");
                }
                else {
                    Alert("操作失败");
                }
            });
        } else {
            Alert("请选择要重置密码的用户!");
        }
    })

    //启用
    $('#enable').click(function () {
        var checkeds = $('input:checkbox:checked');
        var temp = [];
        checkeds.each(function () {
            temp.push($(this).val());
        })
        var userIds = temp.join(',');
        if (userIds !== "") {
            $.post("/Admin/EnableUser", { userId: userIds }, function (msg) {
                if (msg.IsSuccess) {
                    refresh();
                    Alert("操作成功");
                }
                else {
                    Alert("操作失败");
                }
            });
        }
        else {
            Alert("请选择要启用的用户!");
        }
        //console.log(userIds);
    })

    //修改用户信息
    $('#save').click(function () {
        var data = {
            UserID: $('#userId').html(),
            Phone: $("#phone").val(),
            Email: $("#email").val(),
            RealName: $("#realName").val()
        };

        $("#myform").bootstrapValidator('validate');//提交验证  
        if ($("#myform").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码 

            $.post("/Admin/Save", data, function (msg) {
                console.log(msg);
                if (msg.IsSuccess)
                {
                    $("#myEidtModal").modal('hide');
                    Alert("保存成功");
                }
            });
        }
        else {
            //Alert("没有通过验证!");
        }
    });

    $('#cancel').click(function () {
        $('#myEidtModal').modal('hide');
        $('#realName').val("");
        $('#phone').val("");
        $('#email').val("");
    });

    $("#myform").bootstrapValidator({
        live: 'enable',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证  
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的  
        message: '通用的验证失败消息',//好像从来没出现过  
        feedbackIcons: {//根据验证结果显示的各种图标  
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },
        fields: {
            text: {
                validators: {
                    notEmpty: {//检测非空,radio也可用  
                        message: '必填项未填写，请输入.'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {//检测非空,radio也可用  
                        message: '必填项未填写，请输入.'
                    },
                    regexp: {//正则验证  
                        regexp: /^1[3|4|5|8][0-9]\d{8}$/,
                        message: '所输入的手机号码不符要求'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {//检测非空,radio也可用  
                        message: '必填项未填写，请输入.'
                    },
                    emailAddress: {//验证email地址
                        message: '不是正确的email地址'
                    },
                }
            }
        }
    });

    $(function () {
        window.operateEvents = {
            'click .btn-primary': function (e, value, row, index) {
                location
            }
        };

        $("#mytable").bootstrapTable({
            url: '/Admin/GetUserList',   //数据绑定，后台的数据从jsp代码
            search: true,
            striped: true,
            uniqueId: "Index",
            pageList: [5, 10, 15, 20, 25],
            pageNumber: 1,
            sidePagination: "server",
            pagination: true,
            height: 'auto',
            columns: [
            {
                field: 'Index',
                title: '序号',
                visible: false
            },
            {
                formatter: function (value, row) {
                    return '<input type="checkbox" value="' + row.UserID + '">';
                }
            },
            {
                field: 'UserID',
                title: '用户名',
                //formatter: function (value, row) {
                //    return '<a target="_blank" href="/Alumni/Preview?id=' + row.UserID + '">' + value + '</a>';
                //}
            }, {
                field: 'RealName',
                title: '姓名'
            }, {
                field: 'Phone',
                title: '手机号'
            }, {
                field: 'Email',
                title: '电子邮件',
            },
             {
                 field: 'Status',
                 title: '状态',
                 formatter: function (value, row) {
                     if (value === 0) {
                         return "已删除";
                     }
                     if (value === 1) {
                         return "启用";
                     }
                     if (value === 2) {
                         return "待审核";
                     }
                 }
             },
            {
                field: 'Opt',
                title: '操作',
                align: 'center',
                events: operateEvents,
                formatter: function (value, row, index) {
                    console.log(row);
                    return [
                        '<button id="add-sticky" class="btn btn-primary  btn-xs" onclick="Edit(\'' + row.UserID + '\')" ><i class="fa fa-pencil"></i></button>',
                        '<button onclick="Del(' + row.Index + ')" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button>'
                    ].join(' ');
                }
            }],
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数  
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    searchText: params.searchText
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行  
                //console.log("加载成功");
            },
            onLoadError: function () {  //加载失败时执行  
                //console.log("加载数据失败", { time: 1500, icon: 2 });
            }
        });
    })

</script>

